<template>
  <div class="sign">
    <div class="sign-header">
      <router-link to="sign" tag="span">←</router-link>
      <span>帮助</span>
    </div>
    <div class="sign-content">
      <div class="des">
        <h2>请输入验证码</h2>
        <p>验证码已通过短信发送至+86 <span>{{this.$route.query.phone}}</span></p>
      </div>
      <div class="sign-box">
        <div class="inp">
          <input @input="changeCode" type="text" v-model="code" class="inp-controll" placeholder="请输入验证码">
        </div>
        <div class="sele">
          {{time}}
        </div>
      </div>
      <div class="code-btn">
        <button :disabled="disabled" :class="[btnBg?'active':'']" class="load-btn" @click="login"><div v-if="loading" class="loads"></div> 登录</button>
      </div>
    </div>
  </div>
</template>
<script>
import {_sendchake} from '../../network/login.js'
export default {
  data () {
    return {
      telErea:'',
      time:60,
      phone:'',
      code:'',
      disabled:true,
      btnBg:false,
      loading:false,
      sign:{
        login:'success'
      }
    }
  },
  created () {
    this.getCode()
    console.log(this.$route)
  },
  methods: {
    getCode(){
      this.timer()
      this.codes = ''
    },
    changeCode(e){
      this.code = e.target.value;
      _sendchake({phone:this.$route.query.phone,captcha:e.target.value}).then(res=>{
        if (res.data.code!=200) {
          this.$toast('验证码错误')
        }else{
        this.disabled = false;
        this.btnBg = true;
        sessionStorage.setItem('login',JSON.stringify(this.sign))
        }
      })
      if (this.code==1234) {
        this.disabled = false;
        this.btnBg = true;
        sessionStorage.setItem('login',JSON.stringify(this.sign))
      }
    },
    timer(){
      if (this.time>0) {
        this.time--;
        setTimeout(this.timer,1000);
      }
    },
    login(){
      this.loading = true
      setTimeout(() => {
        this.$router.push('/me')
      }, 1000);
    }
  }
}
</script>
<style scoped>
.sign{
  padding: 30px;
}
.sign-header{
  display: flex;
  justify-content: space-between;
}
.sign-header .icon{
  font-size: 30px;
}
.sign .content{
  padding: 40px 10px;
}
.des h2{
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15spx;
  color: black;
}
.des p{
  line-height: 40px;
  color: #999;
  font-size: 14px;
}
.des, .not-sign p a{
  color: #628db8;
}
.sign-box{
  display: flex;
  height: 50px;
  align-items: center;
  background-color: #F9F9F9;
  margin-top: 10px;
  justify-content: space-between;
}
.sele{
  margin-right: 20px;
  color: #ccc;
}
.inp-controll{
  height: 36px;
  background-color: #f9f9f9;
  border: none;
  width: 90%;
  margin-left: 10px;
}
input{
  caret-color:#fe2c55;
}
input::-webkit-input-placeholder{
  color: #ccc;
}
.code-btn button{
  margin: 20px 0;
  width: 100%;
  padding: 15px 0;
  border: none;
  color: #f9f9f9;
}
.code-btn .active{
  color: #ffffff;
  background: #fe2c55;
}
.load-btn{
  display: flex;
  justify-content: center;
}
.loads{
  width: 14px;
  height: 14px;
  border: 3px solid #fff;
  border-bottom: 3px  solid #cccccc;
  border-radius: 50%;
  margin-right: 5px;
  animation:load 1s infinite linear;
}
@keyframes load {
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg);}
}
</style>